<script setup lang="ts">
import SvgIcon from "@/components/common/SvgIcon.vue";
import {computed, ref} from "vue";
const props = defineProps({
  messageType:{
    type:String,
    default:'info'
  },
  message:{
    type:String,
    default:'提示信息'
  },
  showClose:{
    type:Boolean,
    default:false
  }
})
const bgColor = ref()
const fontColor = ref('#fff')
const iconClass = computed(()=>{
  switch (props.messageType) {
    case 'info':
      bgColor.value = '#2468F2'
      fontColor.value = '#fff'
      return 'msg-info'
    case 'success':
      bgColor.value = '#27C93F'
      fontColor.value = '#1A3220'
      return 'msg-success'
    case 'warning':
      bgColor.value = '#F5A623'
      fontColor.value = '#3E2800'
      return 'msg-warning'
    case 'error':
      bgColor.value = '#D54941'
      fontColor.value = '#FFFFFF'
      return 'msg-error'
  }
})
const close = () => {
  document.getElementById('global-message')?.remove()
}
</script>

<template>
  <div id="global-message">
    <SvgIcon class-name="msg-icon" :icon-class="iconClass"/>
    <div class="message-content">{{message}}</div>
<!--    <slot></slot>-->
    <SvgIcon v-if="showClose" class-name="close-icon" icon-class="msg-关闭" @click="close"/>
  </div>
</template>

<style scoped lang="less">
#global-message {
  position: fixed;
  top: 20px;
  left: 50%;
  /* 动画优化 */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 缓动曲线 */
  opacity: 0; /* 初始状态 */
  transform: translate(-50%, -100%); /* 初始位置 */
  animation: messageSlide 0.4s ease forwards; /* 入场动画 */

  box-sizing: border-box;
  /* 颜色调整 */
  //color: rgba(255,255,255,0.95); /* 增加轻微透明 */
  color: v-bind(fontColor);
  background-color: v-bind(bgColor);

  /* 尺寸调整 */
  padding: 12px 20px; /* 更紧凑的内边距 */
  border-radius: 6px; /* 更大的圆角 */

  /* 阴影优化 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 更柔和的投影 */
  z-index: 9999;

  /* 布局保持 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 缩小间距 */
  /* 图标调整 */
  .msg-icon {
    width: 18px; /* 稍大尺寸 */
    height: 18px;
    opacity: 0.9; /* 降低对比度 */
  }

  .close-icon {
    width: 16px;
    height: 16px;
    transition: opacity 0.2s ease; /* 悬停动效 */
    &:hover {
      opacity: 0.8;
    }
  }

  .message-content {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em; /* 增加字间距 */
  }
}

/* 新增动画 */
@keyframes messageSlide {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

</style>
